<template>
	<view>
		<view style="margin: 0 20rpx">
		    <view class="box1">
		        <view class="flex-y-center">
		            <!-- <image class="flex-grow-0 img" :src="info.image" mode="aspectFill"></image> -->
		            <view class="flex-grow-1 center">
		                <view class="name">{{ info.voucher.name }}</view>
		                <view class="flex-y-center">
		             
		                </view>
		                <view class="flex-y-center">
		                    <view class="graytext">销量 : {{ info.sales_num }}</view>
		                </view>
		            </view>
		            <view class="flex-column right" style="height: 110rpx">
		                <view class="flex-x-end">
		                    <view class="price">￥{{ info.voucher.money }}</view>
		                    <view class="">赠送{{ info.voucher.score }}{{money_name}}</view>
		                </view>
		                <view class="flex-x-end">
		                    <view class="HZL_jian" @tap="HZL_jian">-</view>
		                    <view class="HZL_num">{{ num }}</view>
		                    <view class="HZL_jia" @tap="HZL_jia">+</view>
		                </view>
		            </view>
		        </view>
		       
		    </view>
		    <view class="box2 flex-bet">
		        <view class="flex-grow-1">支付方式</view>
		        <view class="graytext">微信支付</view>
		    </view>
		</view>
		<view style="width: 100%; height: 200rpx"></view>
		<view class="bottombtn flex-y-center">
		    <view class="flex-grow-1" style="line-height: 40rpx">
		        <view>
		            合计
		            <text class="amount">￥{{ info.pay_money }}</text>
		        </view>
		        <view>
		         
		           <text class="redtext">赠送</text>
		            <text class="num">{{ info.score }}{{money_name}}</text>
		        </view>
		    </view>
		    <button class="btn" @tap="createOrder" :disabled="disabled" :loading="disabled">{{ order_id > 0 ? '立即支付' : '提交订单' }}</button>
		</view>
	</view>
</template>

<script>
	import {Store} from '../../../apirequest/store-model.js';
	var s = new Store();
	export default {
		data() {
			return {
				num: 1,
				id: 0,
				info: {},
				order_id:0,
				money_name:this.globalData.money_name,
			}
		},
		onLoad(options) {
			this.id  = options.id;
			if(options.order_id){
				this.order_id = options.order_id
			}
		
			this._index()
		},
		methods: {
			_index(){
			  var that = this;
			  s.get_prev_order({id:this.id,num:this.num},(res) => {
			    if(res.code == 1){
			      that.info = res.data
			    }else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			  })
			},
			/**
			 * 增加数量按钮
			 */
			HZL_jia: function (e) {
			    var num = this.num;
			    num++;
			    var info = this.info;
			    var pay_money = (num * parseFloat(info.voucher.money)).toFixed(2);
				var score = (num * info.voucher.score);
			    if (pay_money <= 0) {
			        pay_money = 0;
			    }
			
			    info.pay_money = pay_money;
				info.score = score;
				this.num=num
				this.info=info
			},
			
			/**
			 * 减少数量按钮
			 */
			HZL_jian: function (e) {
			    var num = this.num;
			
			    if (num > 1) {
			        num--;
			        var info = this.info;
			        var pay_money = (num * parseFloat(info.voucher.money) ).toFixed(2);
					var score = (num * info.voucher.score);
			        if (pay_money <= 0) {
			            pay_money = 0;
			        }
			
			        info.pay_money = pay_money;
					info.score = score;
					this.num=num
					this.info=info
			    } else {
			        uni.showToast({
			            icon: 'none',
			            title: '不能再减了哦~'
			        });
			    }
			},
			 //创建订单
			  createOrder(){
			    var that = this;
			    var num = this.num;
			    var id = this.id;
			 
			    s.create_voucher_order({id:id,num:num,order_id:this.order_id},(res) => {
			
			      uni.showToast({
			        title: res.msg,
			        icon:'none'
			      })
			      if(res.code == 1){
					  if(res.data.type == 1){
					  	uni.requestPayment({
					  	    provider: 'wxpay', 
					  		timeStamp: res.data.data.timeStamp,
					  		nonceStr: res.data.data.nonceStr,
					  		package: res.data.data.package,
					  		signType: res.data.data.signType,
					  		paySign: res.data.data.paySign,
					  		success: function (res) {
					  			uni.showToast({
					  				title:'支付成功',
					  				icon:'none'
					  			})
					  	
								 setTimeout(() => {
									wx.switchTab({
									  url: '/pages2/ticket/order/order',
									})
								 },1000)
					  			
					  		},
					  		fail: function (err) {
					  			uni.showToast({
					  				title:'支付失败',
					  				icon:'none'
					  			})
					  		}
					  	});
					  }
					  
			      
			      }
			    })
			  },
		}
	}
</script>

<style>
page {
    background: #eee;
    font-size: 0.75rem;
    color: #333;
}

.HZL_jian {
    width: 50rpx;
    height: 50rpx;
    background-color: #1576fb;
    display: flex;
    justify-content: center;
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
}

.HZL_num {
    width: 50rpx;
    height: 50rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.HZL_jia {
    width: 50rpx;
    height: 50rpx;
    background-color: #1576fb;
    display: flex;
    justify-content: center;
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
}

.box1 {
    background: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
}

.box1 .img {
    width: 130rpx;
    height: 130rpx;
    margin-right: 20rpx;
    border-radius: 10rpx;
}

.box1 .center {
    line-height: 45rpx;
}

.box1 .center .name {
    font-size: 0.95rem;
    font-weight: 700;
}

.box1 .center .graytext {
    color: #999;
    margin-right: 10rpx;
}

.box1 .right .price {
    font-size: 0.95rem;
    font-weight: 700;
}

.box1 .right .yuanjia {
    font-size: 0.95rem;
    font-weight: 700;
    margin-right: 10rpx;
    text-decoration: line-through;
    color: #999;
}

.box1 .item {
    margin: 30rpx 0 10rpx;
}

.box1 .item .icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
}

.box1 .item .graytext {
    color: #999;
}

.box1 .item .num {
    color: #ff4b10;
    font-weight: 700;
    font-size: 0.85rem;
}

.box2 {
    background: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-top: 20rpx;
}

.box2 .icon {
    width: 60rpx;
    height: 60rpx;
    margin-left: 10rpx;
}

.box2 .graytext {
    color: #999;
}
.bottombtn {
    background: #fff;
    position: fixed;
    bottom: 0;
    padding: 15rpx 2%;
    width: 96%;
    box-shadow: 0px -1px 5px 1px #dad5d5;
}
.bottombtn .amount {
    color: #ff4b10;
    font-size: 1.3rem;
    font-weight: 700;
    margin-left: 10rpx;
}
.bottombtn .redtext {
    margin-left: 10rpx;
    color: #ff4b10;
}
.bottombtn .num {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ff4b10;
    margin-left: 10rpx;
}
.bottombtn .btn {
    background: #1576fb;
    color: #fff;
    font-weight: 500;
    font-size: 0.85rem;
    border-radius: 40rpx;
    width: 200rpx !important;
    padding: 20rpx 0;
	text-align: center;
}
</style>
